<template>
    <div>

        我是主体内容
        <div> a is {{ a }} </div>
        <button @click="incrementA"> 让a递增 </button>

        <div>ct is {{ct}}</div>
        <button @click="incrementCt">ct递增</button>

        <button @click="firedAbc"> 让绑定的abc事件触发</button>
    </div>
</template>

<script>
    import { ref,onMounted }  from 'vue'
    export default {
        props:['a','b'],
        data(){
            return {
                ct:1
            }
        },
        methods:{
            incrementCt(){
                this.ct++
            }
        },
        setup(props,ctx){    
            // setup的第一个参数就是接受的自定义属性
            // ctx 的主要目的是为了代替 在setup当中对于this缺失的一些方法的调用
            // 在setup当中 的 this指向 undefine 这个vue故意为之
            const a = ref(2);



            onMounted(()=>{
                console.log('props' ,props);
                console.log('ctx is ', ctx);
                // ctx 有什么？？？？
                // ctx.attrs => 配置api当中的 this.$attrs
                // ctx.slots => 配置api当中的 this.$slots
                // ctx.emit =>  配置api当中的 this.$emit
            })

            const incrementA = ()=>{
                    console.log('this in setup',this);
                  
            }

            const firedAbc  = ()=>{
                // 等同于配置api当中的 this.$emit
                ctx.emit('abc',6666)
            }
            return {
                a,
                incrementA,
                firedAbc
            }
        }
    }

</script>